<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<style type="text/css">
			*{margin: 0;
			padding: 0;
			}
			#imgList{
				list-style: none;
				position: absolute;
				/* 每移动-520px就切换到下一张图片 */
                /* left:-520px;*/ 
			}
			#imgList li{
				/*这是浮动*/
				float: left;
				margin: 0 10px;
			}
			#imgList li img{
				width: 500px;
			    height:300px;
			}
			#outer{
				width: 520px;
				height: 300px;
				margin: 50px auto;
				background-color: green;
				padding: 10px 0;	
				position: relative;
				overflow: hidden;
				
			}
			#nav—a{
				position: absolute;
				bottom: 20px;
				/* 居中 outer 520 nav 25*5=125 520-125= 395/2 =197.5 */
				/* left:197px; */
			}
			#nav—a a{
				float: left;
				width:15px;
				height:15px;
				background-color: red;
				margin:0 5px;
				opacity: 0.5;
				filter:alpha(opacity=50);
			}
			#nav—a a:hover{
				background-color: black;
			}
		</style>
		<script type="text/javascript" src="js/tools.js">
		</script>
		<script type="text/javascript">
			window.onload = function(){
				//这是imglist的宽度
				var imgList = document.getElementById("imgList");
				var imgArr = document.getElementsByTagName("img");
				imgList.style.width = 520*imgArr.length + "px" ;
				//设置nav-a居中
				var Nav = document.getElementById("nav—a");
				var outer = document.getElementById("outer");
				Nav.style.left = (outer.offsetWidth - Nav.offsetWidth)/2 + "px"
				//照片的索引
				var index = 0;
				var allA = document.getElementsByTagName("a");
				allA[index].style.backgroundColor="black";
				
				// 点击超链接切换图片
				for(var i=0;i<allA.length; i++){
					

					//为每一个超链接添加一个num属性 用num当成索引
					allA[i].num = i;
					allA[i].onclick = function(){
						//关闭定时器
						clearInterval(timer);
						//获取点击超链接的索引 this.num就获得索引
						index = this.num;

						//切换图片 
						//imgList.style.left = -520*index + "px";
						//使用tools.js的move函数
						move(imgList,"left",-520*index,20,function(){
							autoChange();
						});
						//修改正在选中的a
					    setA();
					};
				}
				
				
				//自动切换图片
				autoChange();
				
				var timer;//定时器标识
				//创建一个函数，开启自动切换图片
				function autoChange(){
					//开启一个定时器，用来定时切换图片
					timer = setInterval(function(){
						//使索引自增
						index++;
						//判断index的值
						index %= imgArr.length;
						//执行动画
						move(imgList,"left",-520*index,20,function(){
							setA();//修改nav
						});
					},3000)
				};
				//创建一个方法用来设置选中的a
				function setA(){
					
					//判断索引是否是最后一张图片
					if(index == imgArr.length-1){
						index = 0;
						//瞬间切换到第一张图片
						imgList.style.left = 0;
					}
					
					//遍历所有a 设置为红色
					for(var i=0;i<allA.length;i++){
						allA[i].style.backgroundColor = "";
					}
					//将选中的a设置为黑色
					allA[index].style.backgroundColor = "black";
				};
				
				
			}
		</script>
	</head>
	<body>
		<div id="outer">
         <ul id="imgList">
         	<li><img src="img/001.jpg" ></li>
         	<li><img src="img/002.jpg" ></li>
			<li><img src="img/003.jpg" ></li>
			<li><img src="img/004.jpg" ></li>
			<li><img src="img/005.jpg" ></li>
			<li><img src="img/001.jpg" ></li>
         </ul>
		 <div id="nav—a">
		 	<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		 </div>
		</div>
	</body>
</html>
